<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05/2关键帧动画.htmlv</title>
    <link rel="stylesheet" href="./animate.css" />
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        top: 0;
        left: 0;
        /* animation设置元素动画样式
              *name important
              *时间 important
              */
        /* animation: move 20s; */
        animation-name: move;
        animation-duration: 5s;
        /* 动画结束时,让元素保持动画结束时的样式 */
        animation-fill-mode: both;
        /* 动画延迟开始，负值会跳过xs后开始执行 */
        animation-delay: 1s;
      }
      /* @keyframes创建一个关键帧动画
            *move动画名字
            *{设置每一帧的动动画状态}
            */
      @keyframes move {
        0% {
          top: 0;
          left: 0;
        }
        20% {
          top: 0;
          left: 100px;
        }
        40% {
          top: 100px;
          left: 100px;
        }
        60% {
          top: 100px;
          left: 200px;
        }
        80% {
          top: 200px;
          left: 200px;
        }
        100% {
          top: 200px;
          left: 300px;
        }
      }

      @keyframes spin {
        8% {
          transrorm: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      #d2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 50px auto;
        /* animation: spin 5s linear; */
        animation-name: spin;
        animation-duration: 5s;
        /* 设置每两个关键帧之间动画的速率 */
        animation-timing-function: linear;
        /* 设置动画的重复次数 infinite表示无数次 */
        animation-iteration-count: infinite;
      }
      #d2:hover {
        /* 设置动画状态
        *paused暂停
        *running执行状态
        */
        animation-play-state: paused;
        /* 设置动画倒放 */
        animation-direction: reverse;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <div id="d2"></div>
  </body>
</html>
